<template>
  <div>
    <el-drawer
      title="新增文章"
      :visible.sync="drawer"
      :direction="direction"
      style="width：'600px'"
      :modal-append-to-body="true"
    >
      <div class="mpxx">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
          <FormItem label="视频标题" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入视频标题"></Input>
          </FormItem>
          <FormItem label="是否展示" prop="is_name">
            <RadioGroup v-model="formValidate.is_name">
              <Radio :label="0">不显示</Radio>
              <Radio :label="1">显示</Radio>
            </RadioGroup>
            <Tooltip content="前台是否显示视频" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem label="顶部图标" prop="is_ico">
            <RadioGroup v-model="formValidate.is_ico">
              <Radio :label="0">不显示</Radio>
              <Radio :label="1">显示</Radio>
            </RadioGroup>
            <Tooltip content="是否显示顶部图标" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>

          <FormItem label="首页显示" prop="is_home">
            <RadioGroup v-model="formValidate.is_home">
              <Radio :label="0">不显示</Radio>
              <Radio :label="1">显示</Radio>
            </RadioGroup>
            <Tooltip content="是否在首页显示" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem label="封面图" prop="cover">
            <div class="odivimg" v-if="!formValidate.cover" @click="modalPicTap('单选',1)">+</div>
            <div class="odivimg" v-else>
              <img :src="formValidate.cover" alt="" />
              <div class="shanc">
                <Icon @click="shan" type="ios-close-circle" />
              </div>
            </div>
            <Tooltip content="建议尺寸：100 * 100" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem> 
          <FormItem label="模块类型" prop="type" v-if="eid==''">
            <Select v-model="formValidate.type" style="width: 200px">
              <Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
            <Tooltip content="添加后不可修改" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem label="模块类型" prop="type" v-else>
            <Select v-model="formValidate.type" disabled  style="width: 200px">
              <Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
            <Tooltip content="添加后不可修改" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem label="展示数量" prop="num">
            <Input v-model="formValidate.num" placeholder="请输入展示数量"></Input>
            <Tooltip
              content="列表内容在首页展示数量，默认为3 ，此设置仅对文章列表，招聘信息，员工展示，视频模块等列表元素有效"
              placement="right"
            >
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem label="备注">
            <Input v-model="formValidate.mark" placeholder="请输入备注"></Input>
            <Tooltip content="当选择表单模块时，此备注信息为模块描述" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem label="排序值" prop="sort">
            <Input v-model="formValidate.sort" placeholder="请输入排序值"></Input>
            <Tooltip content="值越大, 排序越靠前" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">返回</Button>
          </FormItem>
        </Form>
      </div>
    </el-drawer>
    <div style="z-index: 5000">
      <Modal
        v-model="modalPic"
        width="950px"
        scrollable
        footer-hide
        closable
        title="上传商品图"
        :mask-closable="false"
        :z-index="5000"
      >
        <uploadPictures :isChoice="isChoice" @getPic="getPic" :gridBtn="gridBtn" :gridPic="gridPic"></uploadPictures>
      </Modal>
    </div>
  </div>
</template>
<script>
import uploadPictures from '@/components/uploadPicture';
import { m_save, m_edit } from '@/api/buss.js';
export default {
  components: {
    uploadPictures,
  },
  name: 'getbuss',
  data() {
    return {
      cityList: [
        {
          value: '0',
          label: '文章列表',
        },
        {
          value: '1',
          label: '图文详情',
        },
      ],
      eid: '',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      isChoice: '单选',
      modalPic: false,
      direction: 'rtl',
      drawer: false,
      formValidate: {
        name: '',
        type: '',
        is_show: 0,
        mark: '',
        is_name: 0,
        cover: '',
        sort:'',
        is_ico: 0,
        is_home: 0,
        num:'',
      },
      ruleValidate: {
        sort: [{ required: true, message: '请填写排序值' }],
        type: [{ required: true, message: '请选择模块类型' }],
        num: [{ required: true, message: '请填写展示数量' }],
        is_name: [{ required: true }],
        is_ico: [{ required: true }],
        is_home: [{ required: true }],
        cover: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
        name: [{ required: true, message: '请填写公司名称', trigger: 'blur' }],
      },
      panduan: '',
    };
  },
  methods: {
    shan() {
      this.formValidate.cover = '';
    },
    getPic(pc) {
      this.$nextTick(() => {
        this.formValidate.cover = pc.att_dir;
        this.modalPic = false;
      });
    },
    modalPicTap(title, e) {
			if(e==1){
				const _this = this
				_this.$modalUpload(function(img) {
				  _this.formValidate.cover = img[0]
				})
			}else{
				this.panduan = e;
				this.isChoice = title;
				this.modalPic = true;
			}
			
      // this.panduan = e;
      // this.isChoice = title;
      // this.modalPic = true;
    },
    handleSubmit(name) {
      let then = this;
	  console.log(name,"name")
      this.$refs[name].validate((valid) => {
		  console.log(valid,"valid1")
        if (valid) {
          if (then.eid) {
			  console.log(then.eid, then.formValidate,"then.eid")
            m_edit(then.eid, then.formValidate).then((res) => {
				console.log(res,"resss")
              this.drawer = false;
              this.$Message.success('修改成功');
              this.$emit('isok');
            });
          } else {
            m_save(then.formValidate).then((res) => {
              this.drawer = false;
              this.$Message.success('添加成功');
              this.$emit('isok');
              this.formValidate = {
                name: '',
                type: '',
                is_show: 0,
                mark: '',
                is_name: 0,
                cover: '',
                sort: '',
                is_ico: 0,
                is_home: 0,
                num: '',
              };
            });
          }
        } else {
          this.$Message.error('Fail!');
        }
      });
    },
    handleReset(name) {
      this.drawer = false;
    },
    yesno(e) {
      this.drawer = true;
      if (e) {
        this.eid = e.id;
        this.formValidate.sort=e.sort
        this.formValidate.num=e.num
        this.formValidate.name=e.name
        this.formValidate.type=e.type
        this.formValidate.mark=e.mark
        this.formValidate.is_name=e.is_name
        this.formValidate.cover=e.cover
        this.formValidate.is_ico=e.is_ico
        this.formValidate.is_home=e.is_home
      } else {
        this.eid=''
        this.formValidate = {
          name: '',
          type: '',
          is_show: 0,
          mark: '',
          is_name: 0,
          cover: '',
          sort: '',
          is_ico: 0,
          is_home: 0,
          num: '',
        };
      }
    },
  },
};
</script>
<style lang="stylus" scoped>

::v-deep.ivu-col-span-9:nth-child(2){
    margin-left: 30px
}
.shangc{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #dcdee2;
    ::v-deep.ivu-btn ivu-btn-primary{
        height :28px !important;
        margin-left: 20px;
    }
    ::v-deep.ivu-input{
        border: none;
        outline: none;
    }
}
::v-deep.ivu-tooltip-inner{
    max-width: 1209px;
}
::v-deep.ivu-tooltip{
    margin-left: 10px;
}
::v-deep.ivu-form-item-content{
  display: flex
}
::v-deep.el-drawer__open .el-drawer.rtl {
    width: 50% !important;
}
.mpxx{
    border-top: 1px solid #E1E1E1;
    margin:0px 30px;
    margin-right: 60px;
    padding-top: 10px;
    span{
        display: inline-block;
        padding: 6px 15px;
        color: #609beb;
        background: #f5f7fa;
    }
}
.box{
  display: flex;

}
.odivimg{
  overflow: hidden;
    margin-right: 10px;
    width :140px;
    height :140px;
    border:1px dashed #d9d9d9;
    text-align: center;
    line-height: 140px;
    font-size: 40px;
    border-radius: 10px;
    position relative
    img{
        width :100%;
        height :100%;
    }
    .shanc{
        display:none;
        ::v-deep.ivu-icon{
            position :absolute;
            top:0px;
            right:0px;
        }
    }
}
.odivimg:hover{
    border: 1px dashed #609beb;
}
.odivimg:hover .shanc{
    display: block;
}
.grjl{
     border-top:1px dashed #d9d9d9;
     margin-bottom: 20px;
}
</style>
